<script setup>
import { nextTick, onMounted, ref } from 'vue'

const props = defineProps({
  data: {default: null},
  onClose: {
    type: Function, default: () => {
    }
  },
})
const contextMenu = ref(null)

const clickFunc = (menu) => {
  menu.action()
  props.onClose()
}

onMounted(async () => {
  await nextTick()
  contextMenu.value.focus()
})
</script>

<template>
  <div class="context-menu" ref="contextMenu" @blur="onClose" tabindex="-1">
    <div v-for="(menu, index) in data" :key="index" class="menu" @click="clickFunc(menu)">
      <!--      <img :src="menu.icon" alt=""/>-->
      <div>
        {{ menu.name }}
      </div>
    </div>
  </div>
</template>

<style scoped lang="less">
.context-menu {
  position: fixed;
  z-index: 1000;
  min-width: 140px;
  min-height: 100px;
  padding: 12px 0;
  background-color: #fff;
  //border: 1px solid #dcdfe6;
  outline: none;
  border-radius: 6px;
  border: none;
  box-shadow: 0 1px 2px -2px rgba(0, 0, 0, 0.16), 0 3px 6px 0 rgba(0, 0, 0, 0.12), 0 5px 12px 4px rgba(0, 0, 0, 0.09);

  .menu {
    padding: 6px 16px;
    margin: 4px 0;
    transition: background-color 200ms;
    cursor: pointer;
  }

  .menu:first-child {
    margin-top: 0;
  }

  .menu:last-child {
    margin-bottom: 0;
  }

  .menu:hover {
    background-color: #f5f7fa;
  }
}
</style>